<template>
    <div class='three-table-right w100 h100'>
        <div v-for="(item, index) in list" :key="index" class="list">
            <div> {{ item.name }}</div>
            <ul v-for="(items, indexs) in item.children" :key="indexs" class="list-children">
                {{ items.name }}
                <li v-for="(itemss, indexss) in items.children2" :key="indexss" class="list-children2">{{ itemss.name }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: '',
    components: {},
    data() {
        return {
            list: [{
                name: "盈利财务指标分析A",
                children: [{
                    name: "传统三表",
                    children2: [{
                        name: "利润表",
                    }, {
                        name: "资产负债表",
                    }, {
                        name: "现金流量表",
                    }]
                }]
            }, {
                name: "盈利财务指标分析B"
            }, {
                name: "盈利财务指标分析C"
            }, {
                name: "盈利财务指标分析D"
            }]
        }
    },
    created() { },
    mounted() { },
    methods: {}
}
</script>
<style scoped lang='scss'>
.three-table-right {
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-shadow: 0px 0px 10px 0px #ccc;
}

.list {
    font-size: 20px;
    text-align: center;
    padding-top: 20px;

    .list-children {
        font-size: 18px;
        text-align: left;
        text-indent: 80px;
        padding: 10px 0;

        .list-children2 {
            font-size: 16px;
            text-align: left;
            text-indent: 100px;
            padding: 10px 0;
        }
    }
}

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}
</style>
